Node.js 系列學習日誌 #30 - 野生柯 P相簿 API 列表 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 30

Node.js 系列學習日誌系列第 30 篇

Node.js 系列學習日誌 #30 - 野生柯 P相簿 API 列表

api 鐵人賽 node.js rest albums 柯p

jou516

2014-10-29 12:02:27

5409 瀏覽

分享至

鐵人賽終於到了第三十最終篇，謝謝 IThome 鐵人提供分享的平台，每天固定的發文逼自己在一個月內練技術，在挑選專長的技術裡面一直在尋找對自己有幫助的技術方向而選定了 Node.js ，在這系列當中多半以實務開發的應用為主，到了第三十篇也不例外，不過我們先回顧一下第一篇到第三十篇的文章

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
鐵人賽 Node.js 系列學習日誌文章
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

文章開始

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

本篇將介紹最近滿多人討論的野生柯 p API，將會透過 node-rest-client 取得野生柯 P相簿 API 列表

首先先建立一個 express web framework 框架，請在 terminal 上輸入：

$express -e nodejs-kp-albums-sample

接著按照只是安裝相依套件

$cd nodejs-kp-albums-sample && npm install

接著由於我們要使用到柯 p 官網提供的相簿 api ，在開發前我們需要安裝一個可以支援 restful api 的套件 node-rest-client，接著請在 terminal 輸入

$npm install node-rest-client —save

一切安裝完成之後，就開始來撰寫程式的部分，請先打開 app.js 檔案，在這邊我們要引用裝好的 node-rest-client 套件，將以下語法填入

var Client = require('node-rest-client').Client;
client = new Client();

先宣告 node-rest-client 之後，我們預計將相簿列表印在主首頁 (index)，可以在 app.js 裡面找到var routes = require('./routes/index’); 與 app.use('/', routes); 這一段，也就是說根目錄的位置會指引到 /routes/index.js 檔案裡面，接著就打開 /routes/index.js ，由於我們在 app.js 完成了宣告，在 index.js 撰寫如下：

var express = require('express');
var router = express.Router();


/* GET home page. */
router.get('/', function(req, resp) {


    //取得 KP albums 相簿清單列表
     client.get("http://api.kptaipei.tw/v1/albums/", {}, function(data, res){
        var config = JSON.parse(data.toString());
        console.log(config.data);


        //將資料寫在 locals
        resp.locals.posts = config.data;


        var renderData = {
             title: '柯 p 野生 API',
             data: config.data
        };


        // 將取得到的 json 格式渲染到畫面上
        resp.render('index', renderData);
    });
});


module.exports = router;

可以看到用了 client.get 方法，其有三個參數，第一個參數請到 http://unlimited.kptaipei.tw/docs/#api-ch3 得到相簿清單的 api ：http://api.kptaipei.tw/v1/albums/ ，預期會知道 api 結果會是如下

第二參數由於本篇只做列表，就保持為空 {}，第三個參數就 function callback 操作，在取得 json 格式的資料之後，經過 json.parse 由字串轉換 json ，並且我們已知要抓 data 的陣列，透過物件 renderData 將資料存放，最後就將得到的資料渲染到畫面上，也就是 resp.render('index', renderData);

接著到了 views 的部分，就請開啓 /views/index.ejs 檔案

    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  
  
    <%
         posts.forEach(function(post) {
              var thumb = post.thumbnails;
              var t_small = thumb.small_square;
    %>
          <img src='<%= t_small %>' alt='<%=post.title %>' />
    <% });%>

在這邊我只需要顯示柯p相簿的小張圖，也就是 thumbnails.small_square ，由於已經轉成 json 格式，那麼就當做物件找到 thumbnails.small_square 位置，將取得到的圖片網址塞到 img tag 裡的 src 屬性。那麼，一切的一切準備好之後，就請執行應用程式吧！輸入：